<style type="text/css">
    .el-form-field{display: flex;height: calc(100vh - 152px);height: -webkit-calc(100vh - 152px);height: -moz-calc(100vh - 152px);}
    .el-form-field .el-field-push{width: 200px;overflow-y: auto;overflow-x:hidden;padding-right: 10px;}
    .el-form-field .el-field-push::-webkit-scrollbar{width:5px}
    .el-form-field .el-field-push::-webkit-scrollbar-thumb{background-color:rgba(0,0,0,0)}
    .el-form-field .el-field-push:hover::-webkit-scrollbar-thumb{background-color:#ccc}
    .el-form-field .el-field-push .add-draggable{margin:0 -10px}
    .el-form-field .el-field-content{width:calc(100% - 500px);width: -webkit-calc(100% - 500px);width: -moz-calc(100% - 500px);overflow-y: auto;overflow-x:hidden;padding-left: 10px;border-right: 1px solid #eee;border-left: 1px solid #eee;}
    .el-form-field .el-field-content .empty{min-height:200px;}
    .el-form-field .el-field-content .empty:before{content: "请拖动表单到此处";}
    .el-form-field .el-field-content::-webkit-scrollbar{width:5px}
    .el-form-field .el-field-content::-webkit-scrollbar-thumb{background-color:rgba(0,0,0,0)}
    .el-form-field .el-field-content:hover::-webkit-scrollbar-thumb{background-color:#ccc}
    .el-form-field .el-field-content .el-form-draggable{position:relative;margin-bottom:0!important;padding: 10px;border: 1px dashed #fff}
    .el-form-field .el-field-content .el-form-draggable .icon{position:absolute;top: -10px;left: -130px;background: #409EFF;display:none;cursor:pointer;line-height: 26px}
    .el-form-field .el-field-content .el-form-draggable .icon i{color: #fff;font-size: 16px;padding: 5px;}
    .el-form-field .el-field-content .el-form-draggable .icon .rank{cursor:move}
    .el-form-field .el-field-content .el-form-draggable:hover,
    .el-form-field .el-field-content .el-form-draggable.active{border: 1px dashed #409EFF;}
    .el-form-field .el-field-content .el-form-draggable:hover .icon ,
    .el-form-field .el-field-content .el-form-draggable.active .icon{display: block}
    .el-form-field .el-field-set{width: 300px}
</style>
<script type="text/javascript" src="/admin/js/region.js"></script>
<script>
    /**
     * 表单组件
     */
    Vue.component('el-form-field', {
        template:`
        <div class="el-form-field">
            <div class="el-field-push">
                <draggable class="add-draggable" v-model="typeList" v-bind="addDraggable" :clone="addItem">
                    <div v-for="(item, index) in typeList" class="el-field-move-item">
                        <div class="title">{{item.label}}</div>
                    </div>
                </draggable>
            </div>
            <el-form class="el-field-content" label-width="120px" @submit.native.prevent>
                <draggable :class="{empty: list.length == 0}" v-model="list" v-bind="draggable">
                    <el-form-item v-for="(item, index) in list" :key="index" class="el-form-draggable" :class="{active: setForm.field == item.field}">
                        <div class="icon">
                            <i class="el-icon-edit" @click="setItem(item)" title="编辑"></i>
                            <i class="rank el-icon-rank" title="移动"></i>
                            <i class="el-icon-delete" @click="list.splice(index, 1)" title="删除"></i>
                        </div>
                        <template slot="label">
                            <span v-if="item.request === 1" style="color:#F56C6C">*</span>&nbsp;{{item.field}}：
                        </template>
                        <component 
                            v-model="item.value" 
                            :is="item.is" 
                            :key="item.field" 
                            :type="item.type" 
                            :placeholder="item.placeholder" 
                            :options="region">
                            <template>
                                <el-checkbox v-if="item.is == 'el-checkbox-group'" label="演示"></el-checkbox>
                                <el-radio v-if="item.is == 'el-radio-group'" label="演示"></el-radio>
                            </template>
                        </component>
                    </el-form-item>
                </draggable>
            </el-form>
            <el-empty v-if="setForm == ''"  class="el-field-set" description="未选择字段"></el-empty>
            <el-form v-else class="el-field-set" ref="setForm" :model="setForm" :rules="rules" label-width="100px" @submit.native.prevent>
                <el-form-item label="字段标题：" prop="field">
                    <el-input v-model="setForm.field" placeholder="如：邮箱"></el-input>
                </el-form-item>
                <el-form-item label="校验规则：" prop="rule">
                    <el-input v-model="setForm.rule" placeholder="如：/^[A-Za-z0-9_\-]+$/ig"></el-input>
                </el-form-item>
                <el-form-item label="是否必填：" prop="request">
                    <el-switch v-model="setForm.request" :active-value="1" :inactive-value="0"></el-switch>
                </el-form-item>
            </el-form>
        </div>
        `,
        props: {
            value: {
                type: Array,
                default: [],
            },
        },
        data() {
            return {
                list: this.value,
                region: region,
                draggable: {
                    handle: '.rank',
                    animation: 300,
                    forceFallback: true,
                    group:"people"
                },
                addDraggable: {
                    animation: 300,
                    forceFallback: true, 
                    sort: false,
                    group: {name: 'people', pull: 'clone', put: false},
                },
                typeList: [
                    {label: "文本", is: "el-input", value: ''},
                    {label: "文本域", is: "el-input", type: "textarea", value: ''},
                    {label: "编辑器", is: "el-editor", value: ""},
                    {label: "选择器", is: "el-select", value: ''},
                    {label: "单选框", is: "el-radio-group", value: ''},
                    {label: "多选框", is: "el-checkbox-group", value: []},
                    {label: "城市级联选择器", is: "el-cascader", value: ''},
                    {label: "计数器", is: "el-input-number", value: ''},
                    {label: "日期时间", is: "el-date-picker", type: "datetime", format: "yyyy-MM-dd HH:mm:ss", valueFormat: "yyyy-MM-dd HH:mm:ss", value: ''},
                    {label: "图片上传", is: "el-file-select", type: "image", value: ''},
                    {label: "文件上传", is: "el-file-select", type: "all", value: ''},
                    {label: "颜色选择", is: "el-color-picker", value: ''},
                    {label: "开关", is: "el-switch", value: false},
                ],
                rules: {
                    is: [
                        { required: true, message: '请选择', trigger: 'blur' },
                    ],
                    field: [
                        { required: true, message: '请输入字段标题', trigger: 'blur' },
                    ],
                    type: [
                        { required: true, message: '请选择字段类型', trigger: 'blur' },
                    ],
                },
                setForm: "",
            }
        },
        methods: {
            /**
             * 添加
             */
            addItem(item) {
                let arr         = {};
                arr.is          = item.is;
                arr.type        = item.type;
                arr.value       = item.value;
                arr.field       = common.id(6);
                arr.rule        = '';
                arr.placeholder = '请输入';
                arr.request     = 1;
                this.setForm    = JSON.parse(JSON.stringify(arr));
                return this.setForm;
            },
            /**
             * 设置
             */
            setItem(item, index) {
                this.setForm = item;
            },
        },
        watch: {
            value(v) {
                this.list = v;
            },
            list(v) {
                this.value = v;
                this.$emit('input', v);
            }
        }
    })
</script>